<template>
  <div class="box">
    <div class="border">
      <input type="password" v-model.trim="oldpwd" placeholder="请输入旧密码">
    </div>
    <div class="border">
      <input type="password" v-model.trim="newpwd" placeholder="请输入新密码">
    </div>
    <div class="border">
      <input type="password" v-model.trim="newpwd2" placeholder="再次确认密码">
    </div>
    <div class="btn">
      <mt-button class="f14" type="primary" v-if="!loading" @click="submit">
        <span>提交</span>
      </mt-button>
      <mt-button class="f14" type="default" disabled v-else>
        <mt-spinner color="#333" :type="3"></mt-spinner>
      </mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/service/api'
export default {
  components: {
  },
  data () {
    return {
      oldpwd: '',
      newpwd: '',
      newpwd2: '',
      loading: false
    }
  },
  methods: {
    async submit () {
      var status = true
      var check = pwd => {
        return /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,16}$/.test(pwd)
      }
      if (!check(this.oldpwd) || !check(this.newpwd) || !check(this.newpwd2)) {
        Toast('密码长度需要保持在6-16位且同时需包包含字母和数字')
        status = false
      } else if (this.newpwd !== this.newpwd2) {
        Toast('新密码二次输入需要一致')
        status = false
      }
      if (!status) {
        return false
      }
      this.loading = true
      try {
        await api.modifyPassword({
          oldPassword: this.oldpwd,
          password: this.newpwd
        })
        Toast({
          message: '密码修改成功',
          position: 'middle',
          duration: 3000
        })
        this.$router.push('/set/index')
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  background: #ffffff;
  padding: 1px 30px;
}
.border {
  margin-top: 30px;
  border: 1px solid #e4e4e4;
  border-radius: 9px;
  padding: 20px;
  display: flex;
  align-items: center;
  .text {
    padding-right: 20px;
  }
  .send {
    padding-left: 20px;
    color: #186bd0;
    font-size: 28px;
    white-space: nowrap;
    border-left: 1px #e4e4e4 solid;
    text-align: center;
    &.sending {
      width: 6em;
      color: #ccc;
    }
  }
  input {
    flex: 1;
  }
}
.btn {
  padding: 30px 0;
  .mint-button {
    width: 100%;
    &.mint-button--primary {
      background: #f15d43;
      color: #fff;
    }
    display: flex;
    justify-content: center;
  }
}
</style>
